<template>
	<div id="shopingCommentDetial">
		<div class="shoping-header">
			<img src="../images/ic_shopdetail_back.png" alt="" class="fl">
			<div class="shoping-header-list fl">
				评价详情
			</div>
			<div class="shoping-header-more fr">
				<img src="../images/ic_shopdetail_more.png" alt="">
			</div>
			<div class="clear"></div>
		</div>
		<div class="commentDetial">
			<div class="comment-item-title">
					<img src="../images/pro.png" alt="" class="fl">
					<div class="comment-item-userCont fl">
						<div class="comment-item-userBox">
							<p class="fl">子***木</p>
							<img src="../images/ic_my_buyer_v2.png" alt="" class="fl">
							<div class="clear"></div>
						</div>
						<div class="comment-item-specifications">如意平安+新籽9mm*7mm优质级</div>
					</div>
					<ul class="comment-num fr">
							<li class="comment-num-item fl active"></li>
							<li class="comment-num-item fl"></li>
							<li class="comment-num-item fl"></li>
							<li class="comment-num-item fl"></li>
							<li class="comment-num-item fl"></li>
							<li class="clear"></li>
						</ul>
					<div class="clear"></div>
			</div>
			<div class="shopDetial">
				<img src="../images/pro.png" class="fl" alt="">
				<div class="shopDetial-box fl">
					<div class="shopDetial-title">
						帝瓷房 陶瓷绿植办公修饰美
					</div>
					<div class="shopDetial-moneyBox">
						<div class="shopDetial-money fl"><span>￥</span>170</div>
						<div class='shopDetial-nowmoney fl'>￥370</div>
						<div class="clear"></div>
					</div>
					<div class="goshop"><img src="../images/icon_shopdetail_news_shopping_trolley2.png" alt=""></div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="commentDetial-cont">
				<p>迷你小瓶,喝起来真的很不错很起来真的很不错迷你小瓶的你小瓶,喝起不错,迷你小瓶,喝起来真的很不错很起来真的很不错迷你小瓶的你小</p>
				<ul class="commentDetial-list">
					<li>
						<img src="../images/pro.png" alt="">
					</li>
					<li>
						<img src="../images/pro.png" alt="">
					</li>
					<li>
						<img src="../images/pro.png" alt="">
					</li>
					<li>
						<img src="../images/pro.png" alt="">
					</li>
					<div class="clear"></div>
				</ul>
			</div>
			<div class="commentDetial-time">
				2018-11-15 16:45
			</div>
			<div class="commentDetial-like">
				361
			</div>
		</div>
		<div class="comment">
			<div class="comment-header">
				全部回复(13)
			</div>
			<div class="comment-item">
				<div class="comment-item-img fl">
					<img src="../images/pro.png" alt="">
				</div>
				<div class="comment-item-cont fl">
					<div class="comment-item-name">
						<p class="fl">d青**径</p>
						<div class="comment-item-more fr"></div>
						<div class="comment-item-like fr">12</div>
						<div class="clear"></div>
					</div>
					<div class="comment-item-time">2018-06-25 10:56</div>
					<div class="comment-item-coment">
						<p>我说的是不是有几分道理，你不都不信吗你不都不信吗你不都不信吗你不都不信吗</p>
					</div>
				</div>
				<div class="clear"></div>	
			</div>
			<div class="comment-item">
				<div class="comment-item-img fl">
					<img src="../images/pro.png" alt="">
				</div>
				<div class="comment-item-cont fl">
					<div class="comment-item-name">
						<p class="fl">d青**径</p>
						<div class="comment-item-more fr"></div>
						<div class="comment-item-like fr">12</div>
						<div class="clear"></div>
					</div>
					<div class="comment-item-time">2018-06-25 10:56</div>
					<div class="comment-item-coment">
						<p>我说的是不是有几分道理，你不都不信吗你不都不信吗你不都不信吗你不都不信吗</p>
					</div>
				</div>
				<div class="clear"></div>	
			</div>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import axios from 'axios'
	import BScroll from 'better-scroll';
	import CountDown from 'vue2-countdown'
	import { XHeader, Loading, Toast ,Swiper,
		SwiperItem,} from 'vux'
	export default {
		data() {
			return {
				
			}
		},
		components:{
			Loading,
			Toast,
			Swiper,
			SwiperItem,
		},
		watch: {
			'$route': function(to, from) {
				// this.getGoodsDetail();
				window.parent.scrollTo(0, 0);
			}
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				vm.fullName = from.name;
			})
		},
	
		mounted() {
			
		},
		methods: {

			
		}
	}

	
</script>

<style scoped>
	.commentDetial{
		padding: 0.4rem;
		background: #fff;
	}
	.comment-item-title{
		height: 0.933333rem;
		font-size: 0.32rem;

	}
	.comment-item-title img{
		width: 0.88rem;
		height: 0.88rem;
		border-radius: 100%;
		margin-right: 0.226667rem;
	}
	.comment-item-title .comment-item-userCont{
		font-size: 0.373333rem;
		color: #222;
		line-height: 0.346667rem;
	}
	.comment-item-title .comment-item-userCont img{
		display: inline-block;
		width: 0.346667rem;
		height: 0.346667rem;
	}
	.comment-item-title .comment-item-specifications{
		font-size: 0.32rem;
		color: #999999;
		line-height: 0.32rem;
		margin-top: 0.226667rem;
	}
	.comment-num{
	  margin-top: 0.266667rem;
	  color: #DD2835;
	  font-size: 0.293333rem;
	  line-height: 0.35rem;
	}
	.comment-num span{
	  display: inline-block;
	  margin-left: 0.133333rem;
	}
	.comment-num .comment-num-item{
	  display: inline-block;
	  width: 0.32rem;
	  height: 0.293333rem;
	  background: url('../images/xing2.png')center center;
	  background-size: 100% 100%;
	  margin-bottom: 0.2rem;
	  margin-right: 0.066667rem;
	}
	.comment-num .comment-num-item.active{
	  background: url('../images/xing.png')center center;
	  background-size: 100% 100%;
	}
	.shopDetial{
		background: #F5F5F5;
		border-radius: 0.133333rem;
		position: relative;
		margin-top: 0.613333rem;
	}
	.shopDetial	img{
		width: 1.813333rem;
		height: 1.813333rem;
		border-radius:0.133333rem 0px 0px 0.133333rem;	
		display: inline-block;
		margin-right: 0.213333rem;
	}
	.shopDetial .shopDetial-box .shopDetial-title{
		font-size: 0.373333rem;
		margin-top: 0.346667rem;
		line-height: 0.36rem;
	}
	.shopDetial .shopDetial-box .shopDetial-moneyBox{
		font-size: 0.453333rem;
		color: #DD2835;
		line-height: 0.333333rem;
		margin-top: 0.44rem;
		letter-spacing: -0.013333rem;
	}
	.shopDetial .shopDetial-box .shopDetial-moneyBox .shopDetial-money{
		position: relative;
	}
	.shopDetial .shopDetial-box .shopDetial-moneyBox .shopDetial-money span{
	/*	position: absolute;
		top: 0;
		left: -0.133333rem;*/
		font-size:0.133333rem;
	}
	.shopDetial .shopDetial-box .shopDetial-moneyBox .shopDetial-nowmoney{
		font-size: 0.266667rem;
		color: #666;
		text-decoration: line-through;
		margin-left: 0.2rem;
	}
	.shopDetial .shopDetial-box .goshop{
		position: absolute;
		right:0.4rem;
		top: 0.4rem;
		border-radius: 100%;
		background: #fff;
		width: 1.04rem;
		height: 1.04rem;
	}
	.shopDetial .shopDetial-box .goshop img{
		display: inline-block;
		width: 100%;
		height: 100%;
	}
	.commentDetial-cont{
		font-size: 0.373333rem;
		color: #222;
		margin-top: 0.466667rem;
	}
	.commentDetial-cont .commentDetial-list{
		display: block;
		margin-top: 0.4rem;
	}
	.commentDetial-cont .commentDetial-list li{
		display: inline-block;
		width: 2.16rem;
		height: 2.16rem;
		margin-right: 0.18rem;
		margin-bottom: 0.266667rem;
		float: left;
	}
	.commentDetial-cont .commentDetial-list li img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.commentDetial-cont .commentDetial-list li:nth-of-type(4n){
		margin-right: 0;
	}
	.commentDetial-like{
		width: 2.293333rem;
		height: 0.96rem;
		line-height: 0.96rem;
		padding-left:1.173333rem;
		position: relative; 
		background-color: #F5F5F5;
		margin:0 auto;
		border-radius: 0.48rem;
	}
	.commentDetial-like:before{
		content: '';
		position: absolute;
		background: url(../images/ic_forum_detail_praise.png)center center;
		background-size: 100% 100%;
		width: 0.373333rem;
		height: 0.346667rem;
		top: 0.266667rem;
		left: 0.613333rem;
	}
	.commentDetial-time{
		font-size: 0.32rem;
		color: #999999;
		line-height: 0.266667rem;
		margin-top: 0.333333rem;
		margin-bottom: 0.586667rem;
	}
	.comment{
		background-color: #fff;
		margin-top: 0.266667rem;
		padding: 0 0.4rem
	}
	.comment-header{
		line-height: 0.4rem;
		font-size: 0.4rem;
		padding-top: 0.533333rem;
		
	}
	.comment-item{
		font-size: 0.373333rem;
		margin-top: 0.773333rem;
	}
	.comment-item .comment-item-cont{
		width: 8.0rem;
	}
	.comment-item .comment-item-img img{
		display: inline-block;
		width: 0.866667rem;
		height: 0.866667rem;
		border-radius: 100%;
		margin-right: 0.24rem;
	}
	.comment-item .comment-item-name{
		line-height: 0.346667rem;
		margin-bottom: 0.173333rem;
	}
	.comment-item .comment-item-name .comment-item-like{
		display: inline-block;
		position: relative;
		padding-left: 0.56rem;
	}
	.comment-item .comment-item-name .comment-item-like:before{
		content: '';
		position: absolute;
		left:0;
		top: 0;
		width: 0.373333rem;
		height: 0.346667rem;
		background: url(../images/ic_forum_detail_praise.png);
		background-size: 100% 100%;
	}
	.comment-item .comment-item-name .comment-item-more{
		width: 0.373333rem;
		height: 0.346667rem;
		background: url(../images/icon_shopdetail_seemore.png);
		background-size: 100% 100%;
		margin-left: 0.613333rem;
	}
	.comment-item .comment-item-time{
		font-size: 0.32rem;
		color: #999999;
		line-height: 0.266667rem;
		margin-bottom:0.28rem;
	}
	.comment-item .comment-item-coment{
		line-height: 0.426667rem;
		margin-bottom: 0.133333rem;
	}
</style>